<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .container {
            float: left;
            width: 100%;
        }

        .text {
            width: 200px;
            height: 150px;
            /* 水平垂直居中 */
            margin: 0 auto;
            border: 1px solid #CCC;
            border-radius: 5px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

        }

        .text center {
            font-size: 20px;
            line-height: 50px;
        }

        .online {
            display: inline-block;
            width: 8px;
            border-radius: 4px;
            line-height: 8px;
            height: 8px;
            background-color: limegreen;

        }

        .offline {
            display: inline-block;
            width: 8px;
            border-radius: 4px;
            line-height: 8px;
            height: 8px;
            background-color: darkorange;
        }

        .item {
            width: 30%;
            height: 100px;
            border: 1px solid #CCC;
            margin: 4px;
            text-align: center;
            float: left;
            background-color: rgba(200, 200, 200, 0.5);
            border-radius: 5px;
            box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
            -webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
        }

        .item .time {
            font-size: 12px;
            color: blue;
        }

        .item .state {
            font-size: 12px;
            height: 20px;
            line-height: 20px;
            color: dodgerblue;
        }

        .item .info {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #27ba8c;
        }

        .item .title {
            font-weight: bold;
        }
    </style>
    <link rel="stylesheet" href="icon-font/iconfont.css">
</head>

<body>
    <div class="container">
        <div id="app" style="width: 100%;" v-cloak="">
            <div style="text-align: center;">
                <h2>智能设备</h2>
            </div>

            <div class="item">
                <div class="title">
                    <span class="iconfont icon-shuangkaimen"></span>
                    门
                    <span v-if="dool.online" class="online"></span>
                    <span v-else class="offline"></span>
                </div>
                <div class="state">状态:
                    <span v-if="dool.stream.dool.current_value=='1'">开</span>
                    <span v-else>关</span>

                </div>
                <div class="info">电压:
                    {{dool.stream.doolbat.current_value/10.0}} V
                </div>
                <div class="time">{{dool.stream.doolbat.update_at}}</div>

            </div>
            <!----   光强  -->
            <div class="item">
                <div class="title">
                    <span class="iconfont icon-guangzhao1"></span>
                    光强
                    <span v-if="dool.online" class="online"></span>
                    <span v-else class="offline"></span>
                </div>
                <div class="state">状态:
                    <span v-if="dool.stream.light.current_value=='1'">强</span>
                    <span v-else>弱</span>

                </div>
                <div class="info">电压:
                    {{dool.stream.lightbat.current_value/10.0}} V
                </div>
                <div class="time">{{dool.stream.lightbat.update_at}}</div>
            </div>

            <!----   温度计  -->
            <div class="item">
                <div class="title">
                    <span class="iconfont icon-iconset0480"></span>
                    温度计
                    <span v-if="dool.online" class="online"></span>
                    <span v-else class="offline"></span>
                </div>
                <div class="state">
                    <span>{{dool.stream.temperature.temp}}­°C</span>&nbsp;
                    <span>{{dool.stream.temperature.hume}}%</span>

                </div>
                <div class="info">电压:
                    {{dool.stream.temperature.v/10.0}} V
                </div>
                <div class="time">{{dool.stream.temperature.update_at}}</div>
            </div>

            <!--电脑-->
            <div class="item">

                <div class="title">
                    <span class="iconfont icon-diannao"></span>
                    电脑
                    <span v-if="computer.online" class="online"></span>
                    <span v-else class="offline"></span>
                </div>
                <div class="state">{{computer.msg}}</div>
                <div class="info">

                    <button @click="sendCmd">发送命令</button>
                </div>
                <div class="time">{{computer.time}}</div>
            </div>

            <!--电脑-->
            <div class="item">
                <div class="title">
                    <span class="iconfont icon-M"></span>
                    433模块
                    <span v-if="dool.online" class="online"></span>
                    <span v-else class="offline"></span>
                </div>
                <div class="state">{{dev433.msg}}</div>
                <div>
                    <input type="number" v-model="dev433.val" style="width: 50px;font-size: 12px;">
                </div>
                <div class="info">
                    <button @click="sendCmd433(dev433.val)">发送命令</button>
                </div>
            </div>


        </div>

    </div>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
    <script>

        var httpGet = null;
        var httpPost = null;
        //针对不同平台做出不同的处理,便于本地测试
        if (window.android) {
            console.log("----android---");
            httpGet = function (url, callBack) {
                //生成函数名称
                let callbackName = `callback_${Date.now()}_${Math.floor(Math.random() * 10000)}`;
                function get(url, callBackTemp) {
                    //设置全局函数
                    window[callbackName] = callBackTemp;
                    //回调请求
                    window.android.httpGetAsync(url, "", callbackName);
                }
                get(url, (res) => {
                    callBack(res);
                    //执行完回调函数后，删除函数引用
                    window[callbackName] = null;
                });
            }
            httpPost = function (url, param, callBack) {
                //生成函数名称
                let callbackName = `callback_${Date.now()}_${Math.floor(Math.random() * 10000)}`;
                function get(url, callBackTemp) {
                    //设置全局函数
                    window[callbackName] = callBackTemp;
                    //回调请求
                    window.android.httpPostAsync(url, param, "", callbackName);
                }
                get(url, (res) => {
                    callBack(res);
                    //执行完回调函数后，删除函数引用
                    window[callbackName] = null;
                });
            }
        } else {
            console.log("-----web------");
            //开始处理
            httpGet = function (url, callBack) {
                //生成函数名称
                function get(url, callBackTemp) {
                    //设置全局函数
                    //回调请求
                    //开始发起网络请求
                    axios.get('http://127.0.0.1:8181/test/jsonpGet', {
                        params: { url: url },
                    }).then(res => {
                        callBackTemp(res.data);
                    });
                }
                get(url, (res) => {
                    callBack(res);
                });
            };

            httpPost = function (url, param, callBack) {
                //生成函数名称
                function get(url, callBackTemp) {
                    //设置全局函数
                    //回调请求
                    //开始发起网络请求
                    axios({
                        method: "post",
                        url: 'http://127.0.0.1:8181/test/jsonpPost',
                        data: { url: url, param: param },
                        headers: {
                            'Content-type': 'application/x-www-form-urlencoded'
                        }
                    }).then(res => {
                        callBackTemp(res.data);
                    });
                }
                get(url, (res) => {
                    callBack(res);
                });
            };

        }



    </script>
    <script>


        //查询设备信息


        const { createApp, ref } = Vue;
        const app = {
            data() {
                return {
                    message: 'hello vue...',
                    deviceStreamIdList: ['dool', 'doolbat', 'lightbat', 'light', 'temperature'],
                    deviceId: '933278607',
                    dool: {
                        online: false,
                        stream: {
                        },
                    },
                    computer: {
                        online: false,
                        time: '',
                        msg: '--',
                    },
                    dev433: {
                        msg: '',
                        val: '112233',
                    }
                }
            },
            //监听数据变化，处理数据
            watch: {
                'dool.stream.temperature': function (newVal, oldVal) {
                    var val = newVal.current_value;
                    var v = parseInt(val.substr(0, 2), 16) & 0X7F;
                    var hume = parseInt(val.substr(2, 2), 16);
                    var temp = parseInt(val.substr(4, 2), 16);
                    this.dool.stream.temperature.v = v;
                    this.dool.stream.temperature.hume = hume;
                    this.dool.stream.temperature.temp = temp;
                    //console.log("1:", val.substr(0, 2), "2:", val.substr(2, 2), "3:", val.substr(4, 2))
                    //console.log(this.dool.stream.temperature)
                },
            },

            methods: {
                sendCmd433(val) {
                    this.dev433.msg = "--";
                    var cmds = `{"data":"${val}"}`;
                    console.log(cmds)
                    httpPost("http://api.heclouds.com/cmds?device_id=" + this.deviceId, cmds, res => {
                        if (res.errno == 0) {
                            this.dev433.msg = "发送成功";
                        } else {
                            this.dev433.msg = "发送失败";
                        }
                    });
                },
                sendCmd() {
                    this.computer.msg = "--";
                    var cmds = '{"f":0.95}';
                    httpPost("http://api.heclouds.com/cmds?device_id=925960048", cmds, res => {
                        if (res.errno == 0) {
                            this.computer.msg = "发送成功";
                        } else {
                            this.computer.msg = "发送失败";
                        }
                    });
                },
                //获取设备数据流
                getDeviceStream(deviceId, streamIdList) {
                    var idList = "";
                    for (var i = 0; i < streamIdList.length; i++) {
                        idList += streamIdList[i] + ",";
                    }
                    var url = `http://api.heclouds.com/devices/${deviceId}/datastreams?datastream_ids=${idList}`;

                    httpGet(url, (res) => {
                        const jsonArray = res.data;
                        for (var i = 0; i < jsonArray.length; i++) {
                            var item = jsonArray[i];
                            var id = item.id;
                            this.dool.stream[id] = item;
                        }
                    });
                },

                initMethod() {
                    //获取设备状态(门和光强)
                    httpGet("https://api.heclouds.com/devices/933278607", (res) => {
                        const json = res.data;
                        this.dool.online = json.online;
                    });
                    this.getDeviceStream(this.deviceId, this.deviceStreamIdList);

                    //获取电脑状态
                    httpGet("https://api.heclouds.com/devices/925960048", (res) => {
                        const json = res.data;

                        this.computer.online = json.online;
                    });

                    //获取电脑数据流
                    httpGet("https://api.heclouds.com/devices/925960048/datastreams/value", (res) => {
                        const json = res.data;
                        this.computer.time = json.update_at;
                    });
                }
            },
            // 
            //mounted
            created() {
                //初始哈对象中的部分属性
                for (var i = 0; i < this.deviceStreamIdList.length; i++) {
                    var name = this.deviceStreamIdList[i];
                    var item = {
                        update_at: '',
                        id: '',
                        create_time: '',
                        current_value: ''
                    };
                    this.dool.stream[name] = item;
                }

                this.initMethod();
                //当是手机时候
                if (window.android) {
                    setInterval(() => {
                        this.initMethod();
                    }, 5000);
                }
            },
        };

        createApp(app).mount('#app')





    </script>

</body>

</html>